<template>
  <div class="video" >
    <img class="titleImg" src="@/assets/img/headerImg.png" alt="">
    <div class="allTitle">
      <p class="CnTitle">视频中心</p>
      <p class="EnTitle">VIDEO CENTER</p>
    </div>
    <div class="commonWrapper">
      <el-row >
        <el-col :span="8" v-for="(item, index) in videoList" :key="index" >
          <el-card :body-style="{ padding: '0px' }">
            <div class="video-card-main">
              <div class="video-card-img" @click="videoBtn(item.title,item.video)">
                <img :src="$api.picPre + item.pic" class="image">
                <div>
                  <img src="@/assets/img/playImg.png" alt="">
                </div>
              </div>
              <div class="video-card-content">
                <h1>{{item.title}}</h1>
                <p>{{item.intro}}</p>
              </div>
              <p></p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog :title="videoTitle"  :visible.sync="videoShow">
        <video :src="$api.picPre + videoSrc" controls="controls" width="100%"></video>
    </el-dialog>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="9"
      @current-change="handleCurrentChange"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'video',
  data () {
    return {
      videoList: [],
      videoShow: false,
      videoSrc: '',
      videoTitle: '',
      pagination: {
        current: 1,
        pageSize: 9,
        total: 0
      }
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.pagination.current = val
      this.getVideoList()
    },
    getVideoList () {
      this.$ajax
        .get(this.$api.videoList, {
          page_size: this.pagination.pageSize,
          page: this.pagination.current
        })
        .then(res => {
          this.videoList = res.data
          this.pagination.total = res.total_count
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    },
    videoBtn (title, src) {
      this.videoShow = true
      this.videoSrc = src
      this.videoTitle = title
    }
  },
  created () {
    this.getVideoList()
  }
}
</script>

<style scoped lang="scss">
  .titleImg{
    width: 100%;
  }

</style>
